import React, { Component } from 'react'
import Router from 'umi/router';
import { CheckOutlined, LeftOutlined } from '@ant-design/icons';
import { Input, Button, notification, Row, Col, Pagination, Empty, Divider, Tabs } from 'antd';
import MarkContent from './components/markContent'
import Classify from './components/textClassification'
import Style from './style.less'
import { queryMarkList, labelPre } from '@/services/mark';
import { getDataPurpose, getDataSet, } from '@/services/dataCenter';

const { Search } = Input;
const { TabPane } = Tabs;

class Mark extends Component {

    constructor(props) {
        super(props);
        this.state = {
            Heights: '',// 待标注 列表高度
            markList: [],
            dataSetId: '',// 数据集id
            dataSetInfo: '',// 数据集详情
            activeMarkId: '',// 正在标注的文档
            // 数据用途
            type: 0,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            purposeInfos: [],
            keyword: '', // 搜索 文档
            isMarked: false // 文档标注状态
        };
    }

    componentDidMount() {
        const { id, type } = this.props.match.params;
        const Heights = document.getElementById("contentBox").offsetHeight;
        this.setState({ Heights, dataSetId: id, type }, () => { this.getMarkList(); this.getDataSetInfo() });
        getDataPurpose({ commonType: 'model_purpose' }).then(rs => {
            if (rs.retCode === '0') {
                const purposeInfos = [];
                rs.data.forEach(purpose => {
                    purposeInfos[Number(purpose.commonValue)] = purpose.commonName;
                });
                this.setState({ purposeInfos })
            }
        })
    }

    getDataSetInfo() {
        const { dataSetId } = this.state;
        getDataSet(dataSetId).then(res => {
            if (res.retCode === '0') {
                this.setState({ dataSetInfo: res.data });
            }
        })
    }
    getMarkList(key) {
        const { pageNum, pageSize, keyword, dataSetId, isMarked, total } = this.state;
        const _this = this;
        if (key === "auto") { // 重置 或 提交
            if (pageNum > 1 && (pageNum - 1) * pageSize == total - 1) {
                this.setState({ pageNum: pageNum - 1 }, () => {
                    queryMarkList({ pageNum: pageNum - 2, pageSize, data: { initTxt: keyword, dataSetId, isMarked } }).then(callback);
                });
            } else {
                queryMarkList({ pageNum: pageNum - 1, pageSize, data: { initTxt: keyword, dataSetId, isMarked } }).then(callback);
            }
        } else {
            queryMarkList({ pageNum: pageNum - 1, pageSize, data: { initTxt: keyword, dataSetId, isMarked } }).then(res => {
                _this.setState({ markList: res.data.list, total: res.data.total, activeMarkId: res.data.total > 0 ? res.data.list[0].id : '' });
            });
        }

        function callback(res) {
            if (res.retCode === '0') {
                if (res.data.total > 0) {
                    _this.setState({ markList: res.data.list, total: res.data.total, activeMarkId: res.data.total > 0 ? res.data.list[0].id : '' });
                } else {
                    _this.onTabsChange(!isMarked)
                }
            }
        }
    }

    textPage(pageNum) {
        this.setState({ pageNum }, () => { this.getMarkList() });
    }

    // 搜索标注的文档
    onSearch(keyword) {
        this.setState({ keyword, pageNum: 1 }, () => { this.getMarkList() });
    };

    // 切换标注的文档
    onChooseMark(activeMarkId) {
        this.setState({ activeMarkId });
    };
    //切换标注的文档类型
    onTabsChange(isMarked) {
        this.setState({ isMarked, pageNum: 1 }, () => { this.getMarkList() });
    }

  onRef = (ref) => {
    this.child = ref
  }

    // 预标注
    onClickLabelPre(){
      const { dataSetId } = this.state;

      labelPre({ dataSetId }).then(res=>{
        this.child && this.child.webSocketFunction()
      })
    }
    render() {
        const { markList, purposeInfos, dataSetInfo, Heights, activeMarkId, type, isMarked, pageNum, pageSize, total } = this.state;
        return (
            <Row style={{padding:'0px 24px'}}>
                <Col span={4} style={{ position: 'relative' }}>
                    <div className={Style.gutteBox} style={{ height: `${Heights - 108}px` }}>
                        <div className={Style.leftInfo}>
                            <Button type="link" className={Style.goBack} onClick={_ => { Router.push('/algorithm/dataCenter') }}><LeftOutlined />返回数据集列表</Button>
                            <h3> {dataSetInfo.dataSetName} </h3>
                            <h6> 标注类型：{purposeInfos[type - 0]}</h6>
                            <h6 className={Style.ellipsi} title={dataSetInfo.description}> 简介：{dataSetInfo.description}</h6>
                        </div>
                        <Divider style={{ margin: '20px 0' }} />
                        <div>
                            <div style={{ paddingRight: 16 }}>
                              <Search placeholder="搜索文本" onSearch={this.onSearch.bind(this)} style={{ width: type-0 !== 7 ? '50%' : '100%' }} />
                              {
                                type-0 !== 7 && (isMarked ?<Button type="primary" style={{marginLeft: 10, opacity: '0.4'}}>预标注</Button>:
                                  <Button type="primary" onClick={this.onClickLabelPre.bind(this)} style={{marginLeft: 10}}>预标注</Button>)
                              }
                            </div>
                            <div className={Style.docTab}>
                                {
                                    [{ type: false, text: '未标注' }, { type: true, text: '已标注' }].map(val => <a className={val.type === isMarked ? Style.activeMarkItem : null}
                                        key={val.text} onClick={this.onTabsChange.bind(this, val.type)}>{val.text}</a>)
                                }
                            </div>
                            <ul className={Style.docUl}>
                                {total < 1 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
                                    markList.map((v, index) => {
                                        return (
                                            <li key={v.id} className={v.id == activeMarkId ? Style.activeLi : ''}>
                                                <a onClick={this.onChooseMark.bind(this, v.id)} data-id={v.id} key={v.id}>
                                                    {`${(pageNum - 1) * 10 + index + 1}. ${v.initTxt}`}
                                                    {v.isMarked ? <CheckOutlined data-id={v.id} /> : null}
                                                </a>
                                            </li>
                                        );
                                    })
                                }
                            </ul>
                            {total > 10 && <Pagination simple total={total} pageSize={pageSize} current={pageNum} style={{ textAlign: 'right' }} onChange={this.textPage.bind(this)} />}
                        </div>
                    </div>
                </Col>
                <Col span={20} style={{ height: `${Heights - 64}px` }}>
                    {/* type===2 数据用途 ：文本分类 */}
                    {type == 2 ?
                        <Classify id={activeMarkId} key={activeMarkId} callBack={this.getMarkList.bind(this, "auto")} /> :
                        <MarkContent onRef={this.onRef} markType={type} id={activeMarkId} key={Math.random()} total={total} callBack={this.getMarkList.bind(this, "auto")} />
                    }
                </Col>
            </Row>
        );
    }
}

export default Mark
